<template>
  <view class="main">
    <nut-tabs v-model="state.tab1value" background="white">
      <nut-tab-pane title="运费估算" style="padding: 8px 12px">
        <FreightEstimate :mainState="mainState" :mainShow="mainShow" :mainShow2="mainShow2" @errMsg="errMsg" ref="yfgs"></FreightEstimate>
      </nut-tab-pane>
      <nut-tab-pane title="时效价格" style=" padding: 8px 12px">
        <PrescriptionPrice :mainState="mainState" :mainShow="mainShow" :mainShow2="mainShow2" @errMsg="errMsg"></PrescriptionPrice>
      </nut-tab-pane>
    </nut-tabs>
    <nut-popup position="bottom" v-model:visible="mainShow.show">
      <nut-picker ok-text="确认" cancel-text="取消" @cancel="mainShow.show=false" v-model="mainState['timeSendAddress']" :columns="addressList" title="城市选择"
        @confirm="confirm">
<!--        <template #top>-->
<!--          <nut-searchbar @change="valueChange" v-model="searchValue" placeholder="请输入省查找">-->
<!--            <template v-slot:rightin>-->
<!--              <Search2 />-->
<!--            </template>-->
<!--          </nut-searchbar>-->
<!--        </template>-->

      </nut-picker>
    </nut-popup>

    <nut-popup position="bottom" v-model:visible="mainShow2.show">
      <nut-picker ok-text="确认" cancel-text="取消" @cancel="mainShow2.show=false" v-model="mainState['timeGetAddress']" :columns="addressList" title="城市选择"
                  @confirm="confirm2">
      </nut-picker>
    </nut-popup>


    <nut-notify v-model:visible="dialogErr.dialogShow" :msg="dialogErr.dialogMsg" />
  </view>
</template>
<script lang="ts" setup>
import Taro from "@tarojs/taro";
import { $post, $get } from "../../../@api/index";
import FreightEstimate from "./components/freightEstimate.vue";
import PrescriptionPrice from "./components/prescriptionPrice.vue";
import { onMounted, ref, reactive, watch } from "vue";
import { Search2 } from '@nutui/icons-vue-taro';
const searchValue = ref('')
const searchValue2 = ref('')
const state = reactive({
  tab1value: "0",
});
const dialogErr = ref<{
  dialogShow: boolean;
  dialogMsg: string;
}>({
  dialogShow: false,
  dialogMsg: "请选择发货地",
});
const mainState = ref<{
  sendAddress: Array<string>;
  getAddress: Array<string>;
  timeSendAddress: Array<string>;
  timeGetAddress: Array<string>;
}>({
  sendAddress: [],
  getAddress: [],
  timeSendAddress: [],
  timeGetAddress: [],
});
const mainShow = ref<{
  show: boolean
}>({
  show: false,
})
const mainShow2 = ref<{
  show: boolean
}>({
  show: false,
})
export interface AddressList {
  code: string;
  children?: AddressList[];
  id: number;
  text: string;
  value: string
}
const addressList = ref<AddressList[]>([]);
const valueChange = (v) => {
  let has = addressList.value.find(t => {
    return t.text.includes(v)
  })
  if (has) {
    mainState.value[mainShow.value.type] = [has.text, has.children![0].text, has.children![0].children![0].text]
  }


}
//异常提示
function errMsg(msg: string) {
  dialogErr.value.dialogMsg = msg;
  dialogErr.value.dialogShow = true;
}

const confirm = (data) => {
  mainState.value['sendAddress'] = data.selectedValue
  mainShow.value.show = false
}
const confirm2 = (data) => {
  mainState.value['getAddress'] = data.selectedValue
  mainShow2.value.show = false
}
const addKey = (arr) => {
  arr.forEach(t => {
    t.value = t.text
    if (t.children) {
      addKey(t.children)
    }
  })

  return arr
}
// 请求所有地址数据
async function getAddress() {
  Taro.showLoading({
    title: '加载中',
  })
  //const { data: res } = await $get<{ data: { info: AddressList[] } }>("/selfmachine-system/addressBook/area/erp/true/true");
  const res = await $post<{ info: AddressList[] }>("http://it.shenghui56.com/serversh/general/addressByCode", {
    showallbranchs: 'true',
    showonlyTF: 'true',
  });
  Taro.hideLoading()
  addressList.value = toDistrictTree(res.data.info)
  mainState.value.sendAddress = ["福建省", "三明市", "梅列区"]
  mainState.value.getAddress = ["福建省", "三明市", "梅列区"]
  mainState.value.timeSendAddress = ["福建省", "三明市", "梅列区"]
  mainState.value.timeGetAddress = ["福建省", "三明市", "梅列区"]


}

function toDistrictTree(addressList: any) {
  return addressList.map(it => {

    return {
      text: it.name,
      value: it.name,
      children: it.children ? toDistrictTree(it.children) : null
    }
  })
}
getAddress();

const events = {
  change(val: string[]) {
    // console.log(val);
  },
};
</script>
<style lang="less">
page {
  background-color: #f5f5f5;
  --nut-tabs-horizontal-tab-line-color: #0966ff;
  .nut-tab-pane {
    background-color: transparent;
  }
}
.main {
  height: 100%;
  width: 100%;
}

.nut-tabs__content {
  height: 100%;
}
</style>
